<template>
  <el-row>
    <el-col :span="5">
      <basic-container>
        <avue-tree :option="treeOption" :data="treeData"
                   @node-click="nodeClick" :loading="treeLoading"
                   :key="key"/>
      </basic-container>
    </el-col>
    <el-col :span="19">
      <basic-container>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   :page.sync="page"
                   v-model="form"
                   ref="crud"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
          <template slot-scope="{disabled,size}" slot="currentCycleSearch">
            <div v-if="query.cycleType=='year'">
              <el-date-picker
                v-model="query.currentCycle"
                type="year"
                value-format="yyyy-MM-dd"
                placeholder="选择年">
              </el-date-picker>
            </div>
            <div v-if="query.cycleType=='month'">
              <el-date-picker
                v-model="query.currentCycle"
                type="month"
                value-format="yyyy-MM-dd"
                placeholder="选择月">
              </el-date-picker>
            </div>
            <div v-if="query.cycleType=='date'">
              <el-date-picker
                v-model="query.currentCycle"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div v-if="query.cycleType=='quarter'">
              <jdSelect @getValue="changeCycle" ref="jd"></jdSelect>
            </div>
          </template>
        </avue-crud>
      </basic-container>
    </el-col>
  </el-row>
</template>

<script>
import {getStatisticalType} from "@/api/data_quality/business_model";
import {getModelProgrammeTree} from "@/api/data_quality/quality_testing_programme"
import {pageList} from "@/api/data_quality/quality_testing_log";
import {validatenull} from "@/util/validate";
import jdSelect from "@/views/data_quality/quality_testing_programme/result_statistics/jdSelect"

export default {
  name: "index",
  components: {jdSelect},
  data() {
    return {
      treeLoading: true,
      treeData: [],
      treeOption: {
        addBtn: false,
        menu: false,
        size: 'small',
        props: {
          label: 'title',
          value: 'id',
          children: 'children'
        }
      },
      key: 0,
      form: {},
      query: {
        currentCycle: '',
        cycleType: '',
      },
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        enter: false,
        calcHeight: 30,
        labelWidth: 110,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        indexLabel: '序号',
        selection: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        saveBtn: false,
        cancelBtn: false,
        dialogClickModal: false,
        columnBtn: false,
        refreshBtn: false,
        searchShowBtn: false,
        submitBtn: false,
        emptyBtn: false,
        header: false,
        searchBtn: false,
        menu:false,
        column: [
          {
            label: "统计类型",
            prop: "currentCycle",
            hide: true,
            searchslot: true,
            search: true,
          },
          {
            label: "质检结果",
            prop: "qualityTestingResult",
            type:'radio',
            dicData:[
              {
                label: "成功",
                value: '1'
              },
              {
                label: "失败",
                value: '0'
              }
            ],
          },
          {
            label: "统计时间",
            prop: "currentCycleStr",
          },
          {
            label: "数据量",
            prop: "dataVolume",
            width:90
          },
          {
            label: "错误数",
            prop: "errorVolume",
            width:90
          },
          {
            label: "分值",
            prop: "score",
            width:90
          },
          {
            label: "耗时(毫秒)",
            prop: "timeConsuming",
            width:90
          },
          {
            label: "执行者",
            prop: "executor",
          },
          {
            label: "质检时间",
            prop: "qualityTestingTime",
          },
        ]
      },
      data: [],
      modelId: '',
    }
  },
  mounted() {
    this.getTreeData();
  },
  watch: {
    modelId: {
      handler(val) {
        if (validatenull(val)) {
          this.query.cycleType = '';
          this.option.searchBtn = false;
          this.option.emptyBtn = false;
        } else {
          getStatisticalType(val).then(res => {
            this.query.cycleType = res.data.data;//模型的统计类型
            if (!validatenull(this.query.cycleType)) {
              this.option.searchBtn = true;
              this.option.emptyBtn = true;
            } else {
              this.option.searchBtn = false;
              this.option.emptyBtn = false;
            }
          })
        }
      }
    }
  },
  methods: {
    changeCycle(val) {
      this.query.currentCycle = val;
    },
    nodeClick(data) {
      if (data.hasChildren) {
        this.query.modelId = data.id;
        this.query.qualityTestingProgrammeId = '';
      } else {
        this.query.modelId = data.parentId;
        this.query.qualityTestingProgrammeId = data.id;
      }
      this.modelId = this.query.modelId;
      this.onLoad(this.page)
    },
    getTreeData() {
      getModelProgrammeTree().then(res => {
        this.treeData = res.data.data;
        this.treeLoading = false
      })
    },
    searchReset() {
      this.query.currentCycle = '';
      // this.data = [];
      if (this.query.cycleType == 'quarter') {
        this.$refs.jd.emptyShowValue();
      }
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = Object.assign({}, this.query, params);
      // this.query = params;
      this.page.currentPage = 1;
      console.log(this.query)
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page)
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page)
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      pageList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        data.records.forEach(item=>{
          if(item.score==-1){
            delete item.score;
          }
        })
        this.data = data.records;
        this.loading = false;
      });
    },
  }
}
</script>

<style scoped>

</style>
